<template>
  <el-collapse-item class="edit-title" title="尺寸和位置" name="position">
    <el-form>
      <div style="display: flex; margin-top:10px">
        <input-normal label="大小" v-model="conAttr.width" unit="宽" @change="onChangeWH"></input-normal>
        <input-normal label="" v-model="conAttr.height" unit="高" @change="onChangeWH"></input-normal>
      </div>
      <div style="display: flex;">
        <input-normal label="位置" v-model="conAttr.left" unit="X" @change="onChangePosition"></input-normal>
        <input-normal label="" v-model="conAttr.top" unit="Y" @change="onChangePosition"></input-normal>
      </div>
      <input-normal label="前后层次" v-model="conAttr.zIndex" @change="onChangeComponentZIndex"></input-normal>
    </el-form>
  </el-collapse-item>
</template>

<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'

const useWebComponent = useWebComponentStore()

let conAttr_: IConAttr
const conAttr = computed(() => {
  conAttr_ = useWebComponent.currentComponentData!.conAttr
  return conAttr_
})
const onChangeWH = () => {
  const wid = _.parseInt(conAttr_.width)
  const hei = _.parseInt(conAttr_.height)
  useWebComponent.changeWH({ width: wid ? wid : 10, height: hei ? hei : 10})
}
const onChangePosition = () => {
  const left = _.parseInt(conAttr_.left)
  const top = _.parseInt(conAttr_.top)
  useWebComponent.recordMousePosition({ left: left ? left : 0, top: top ? top : 0 })
}
const onChangeComponentZIndex = () => {
  let zIndex = _.parseInt(conAttr_.zIndex)
  if(!zIndex || zIndex < 0) {
    zIndex = 0
  }
  useWebComponent.adjustComponentZIndex(zIndex)
}
</script>



